<template>
  <div class="t1">
    <div class="pic_show">
      <img :src="imgsrc" alt="" />
    </div>
    <div class="info_list">
        <slot></slot>
      <h2>{{title}}</h2>
      <p>观众评<span class="grade"> {{rate}}</span></p>
      <p>{{desc}}</p>
      <p>{{state}}</p>
    </div>
    <div class="btn_mall">购票</div>
  </div>
</template>



<script>
export default {
  props: ["title", "rate", "desc", "state", 'imgsrc'],
};
</script>

<style scoped>
.t1 {
  display: flex;
  flex: 1;
}
.pic_show {
  width: 64px;
  height: 90px;
}
.pic_show img {
  width: 100%;
}
.info_list {
  margin-left: 10px;
  flex: 1;
  position: relative;
}
.info_list h2 {
  font-size: 17px;
  line-height: 24px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.info_list p {
  font-size: 13px;
  color: #666;
  line-height: 22px;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.info_list .grade {
  font-weight: 700;
  color: #faaf00;
  font-size: 15px;
}
.info_list img {
  width: 50px;
  position: absolute;
  right: 10px;
  top: 5px;
}
.btn_mall {
  width: 47px;
  height: 27px;
  line-height: 28px;
  text-align: center;
  background-color: #f03d37;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
</style>